<!--
 * @Author: ZhaoChenGuang
 * @Date: 2025-01-18 14:13:37
 * @Description: 
-->
<script setup lang="ts">
import { ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import { List, ListItem, ListItemMeta } from 'ant-design-vue';

const data:any = ref();
const loading:any = ref(false);

const [Drawer, drawerApi] = useVbenDrawer({
  onCancel() {
    drawerApi.close();
  },
  onClosed() {
    drawerApi.setState({ overlayBlur: 0, placement: 'right' });
  },
  async onOpenChange(isOpen) {
    if (isOpen) {
      const { content } = await drawerApi.getData();
      if (content) {
        data.value = JSON.parse(content);
      }
    }
  },
  async onConfirm() {
    drawerApi.close();
  },
});
</script>

<template>
  <Drawer
    title="工资表详情"
    class="w-full"
    :loading="loading"
    title-tooltip="标题提示内容"
    :show-cancel-button="false"
    :show-confirm-button="false"
  >
    <List item-layout="horizontal" :data-source="data">
      <template #renderItem="{ item }">
        <ListItem>
          <ListItemMeta>
            <template #title>
              姓名: {{ item['姓名'] }} 身份证号码 : {{ item['身份证号码'] }} 年:
              {{ item['年'] }} 月份: {{ item['月份'] }} 养老 :
              {{ item['养老'] }} 医疗 : {{ item['医疗'] }} 失业 :
              {{ item['失业'] }} 公积金 : {{ item['公积金'] }} 个税 :
              {{ item['个税'] }} 实发工资 : {{ item['实发工资'] }}
            </template>
          </ListItemMeta>
        </ListItem>
      </template>
    </List>
  </Drawer>
</template>
